<template>
	<view class="book-page">
		<view class="book-header">
			<view>
				<view class="line-time">
					房间类型：{{dealProductType}}
				</view>
				<view class="line-time">
					包间：{{productName}}
				</view>
				<view class="line-time flex-sb">
					<view>选择预定用户：</view>
					<view @click="toUserList"> {{userInfo.userName || '请选择预定用户'}}<uni-icons color="#000" type="right" size="12"></uni-icons></view>
				</view>
			</view>
			<view class="date-box">
				<view class="date-item" @click="changeDate(index)" :class="currentDate === index?'act-btn':''"
					v-for="(item,index) in dateRangArr" :key="index">
					<view class="date-tltle">{{item.week}}</view>
					<view class="date-text">{{item.monthDay}}</view>
				</view>
			</view>
		</view>
		<view class="book-main">
			<view class="tabs">
				<v-tabs :tabs="tabs" :zIndex="3" v-model="current" :scroll="false" color="#000" line-color="#f53458"
					lineHeight='5rpx' active-color="#f53458" style="width: 100%" :lineScale="0.1" ref="tabs"
					@change="changeTab"></v-tabs>
			</view>
			<!-- 列表 -->
			<packageModel v-if="isLoadData" @changePackage="changePackage" :dateArr="dateArr" :timeList="timeList"
				:currentDate="currentDate" :current="current" :packageList="packageList" :bookingTimeVo="bookingTimeVo">
			</packageModel>
		</view>
		<view class="footer-btn">
			<view class="btn" @click="saveSubmit">确认预定</view>
		</view>
	</view>
</template>

<script>
	import packageModel from '@/components/package-model.vue'
	import paySuccess from '@/components/pay-success.vue'
	export default {
		components: {
			packageModel
		},
		computed:{
			dealProductType(){
				let type = ''
				this.productionModel.forEach((item,index)=>{
					if(item.modelType === this.productType){
						type = item.modelName
					}
				})
				return type
			}
		},
		data() {
			return {
				storeDetail: {},
				tagArr: [],
				productionModel:[],
				dateArr: [],
				dateRangArr: [],
				currentDate: 0,
				tabs: ['套餐模式', '小时模式'],
				current: 0,
				payType: 1,
				productId: '',
				bookingTimeVo: {},
				packageList: [],
				packageDetail: {},
				isLoadData:false,
				useStatus:'',
				productType:'',
				timeList:[],
				productName:'',
				userInfo:{}
			}
		},
		methods: {
			// 选择用户
			toUserList(){
				uni.navigateTo({
					url:'/pages/user-list/user-list?isCheck=true',
					events: {
						// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
						reload: (option) => {
							this.userInfo = option
						}
					}
				})
			},
			// 清空已选信息
			clearPackageDetail(){
				this.packageDetail = {}
			},
			// 选择日期
			changeDate(index) {
				this.currentDate = index
				this.getProductTime()
				this.clearPackageDetail()
			},
			// 获取日期的预定情况
			getProductTime() {
				this.$request({
					method: 'get',
					url: `/applet/user/product/${this.productId}/${this.dateRangArr[this.currentDate].date}`,
					loading: true,
					isEncrypt: false
				}).then(res => {
					this.bookingTimeVo = res.data
				})
			},
			// tab切换加载
			changeTab(index) {
				this.current = index
				this.clearPackageDetail()
			},
			// 获取产品详情
			getDetailData() {
				this.$request({
					method: 'get',
					url: `/applet/store/product/bookingInfo//${this.productId}`,
					loading: true,
					isEncrypt: false
				}).then(res => {
					const {
						bookDateList,
						productTagList,
						packageList,
						shopVo,
						bookingTimeVo,
						productType,
						productName
					} = res.data
					this.tagArr = productTagList
					this.dateArr = bookDateList
					this.dateRangArr = JSON.parse(JSON.stringify(bookDateList))
					this.dateRangArr.splice(bookDateList.length - 1, 1)
					this.bookingTimeVo = bookingTimeVo
					this.packageList = packageList
					this.productType = productType
					this.productName = productName
					this.storeDetail = {
						name: shopVo.name,
						address: shopVo.province + shopVo.city + shopVo.area + shopVo.address,
						time: shopVo.startTime + '~' + shopVo.endTime,
						shopId: shopVo.shopId
					}
					this.useStatus = res.data.useStatus
					this.isLoadData = true
				})
			},
			// 选择套餐
			changePackage(data) {
				this.packageDetail = JSON.parse(JSON.stringify(data))
			},
			// 获取产品类型
			getProductionModel(){
				this.$request({
					method: 'get',
					url: `/applet/store/product/modelList`,
					loading: true,
					isEncrypt: false
				}).then(res => {
					this.productionModel = res.data || []
				}).catch(err => {
					console.log('查询异常：', err)
				})
			},
			// 保存代预定
			saveSubmit(){
				if(!this.userInfo.userId){
					uni.showToast({
						title:'请选择预定用户',
						duration:2000,
						icon:'none'
					})
					return
				}else if(this.current ===0 && !this.packageDetail.packageId){
					uni.showToast({
						title:'请选择套餐',
						duration:2000,
						icon:'none'
					})
					return
				}else if(!this.packageDetail.startTime){
					uni.showToast({
						title:'请选择时间',
						duration:2000,
						icon:'none'
					})
					return
				}
				const data = this.packageDetail
				data.userId = this.userInfo.userId
				data.payType = 0
				data.shopId = this.storeDetail.shopId
				data.productId = this.productId
				data.bookingType = this.current+1
				this.$request({
					method: 'post',
					url: `/applet/store/order/proxyBooking`,
					data,
					loading: true,
					isEncrypt: false
				}).then(res => {
				     if(res.code === 200){
						 uni.showToast({
						 	title:'预定包间成功',
						 	duration:2000,
						 	icon:'none'
						 })
						 setTimeout(()=>{
							uni.navigateBack() 
						 },2000)
					 }else{
						 uni.showToast({
						 	title:res.msg,
						 	duration:2000,
						 	icon:'none'
						 })
					 }
				}).catch(err => {
					console.log('请求异常：', err)
				})
			}
		},
		onLoad(option) {
			this.productId = option.productId
			this.getDetailData()
			this.getProductionModel()
		}
	}
</script>

<style lang="scss" scoped>
	.book-page {
		height: 100vh;
		
		.footer-btn{
			width: 100%;
			position: absolute;
			bottom: 0;
			padding: 30rpx;
			box-sizing: border-box;
			display: flex;
			
			.btn{
				flex: 1;
				text-align: center;
				border-radius: 40rpx;
				padding: 20rpx;
				background: #ff9600;
				color: #FFF;
			}
		}
		
		.flex-sb {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.book-header {
			background: #ffd589;
			padding: 30rpx;
		}

		.book-title {
			font-weight: bold;
			font-size: 32rpx;
			color: #333333;
			margin-bottom: 20rpx;
		}

		.main-btns {
			display: flex;
			flex-wrap: wrap;

			.tag {
				background: #FFF;
				border-radius: 4rpx;
				border: 1rpx solid #1D7F69;
				color: #1D7F69;
				padding: 2rpx 4rpx;
				margin-right: 10rpx;
				font-size: 20rpx;
				margin-top: 10rpx;
			}
		}

		.line-time {
			margin-top: 10rpx;
			font-size: 28rpx;
			color: #000;
			display: flex;
			align-items: center;
		}

		.icon-box {
			display: flex;
			align-items: center;
		}

		.icon-sty-01 {
			width: 22rpx;
			height: 22rpx;
			margin-right: 10rpx;
		}

		.icon-sty-02 {
			width: 20rpx;
			height: 26rpx;
			margin-right: 10rpx;
		}

		.date-box {
			display: flex;
			flex-wrap: wrap;
			padding: 10rpx 0;
			margin-top: 20rpx;

			.date-item {
				flex: 1;
				margin: 0 10rpx;
				background: #FFF;
				text-align: center;
				padding: 10rpx;
				border-radius: 10rpx;
				box-sizing: border-box;

				.date-tltle {
					font-weight: bold;
					font-size: 24rpx;
					color: #333333;
				}

				.date-text {
					font-size: 18rpx;
					color: #333333;
				}
			}

			.act-btn {
				border: 1px solid #f54d54;
				background: #fff9e3;
				position: relative;
			}

			.act-btn::after {
				content: '';
				position: absolute;
				width: 10rpx;
				height: 10rpx;
				background: #fff9e3;
				border-bottom: 1px solid #f54d54;
				border-right: 1px solid #f54d54;
				bottom: -8rpx;
				left: calc(50% - 5rpx);
				transform: rotate(45deg);
			}
		}

		.book-main {
			width: 100%;
			border-radius: 40rpx 40rpx 0 0;
			overflow: hidden;
			margin-top: -26rpx;
		}

		.tabs {
			display: flex;
			align-items: center;
			width: 100%;
			height: 100rpx;
			box-sizing: border-box;
			background-color: #fff;
			box-shadow: 0px 4px 10rpx rgba(0, 0, 0, 0.1);
		}



	}
</style>